<template>
	<popup-bottom :show="show" @close="closeSkuBox">
		<view class="sku-box">
				<view class="sku-header container">
					
					<view class="ab_bot" @click="closeSkuBox">
						<u-icon name="close" color="#4f4f4f" size="32"></u-icon>
					</view>
					<image class="goods-img" :src="commodity.image"></image>
					
					<view class="sku-goods-info">
						<view class="money" :style="{color:themeColor}">
							<text class="symbol fs-26">￥</text>
							<text class="amount fs-38">{{discount==0?buyCount*commodity.price:(buyCount*commodity.price)*discount/10| toFixed2}}</text>
						</view>
						<view class="stock fs-24">
							库存：{{commodity.stock}}
						</view>
						<view class="fs-24" style="width: 66vw;overflow-wrap: break-word;">
							已选：<text style="padding-right: 10rpx;" v-for="item,inx in commodity.sku_name" :key="inx">{{item}}</text>
						</view>
					</view>
				</view>
				<scroll-view class="sku-list" scroll-y="true">
					<view class="sku-item container" v-for="(sku,sIndex) in mySpecifications" :key="sku[speId]">
						<view class="sku-name">{{sku[speName]}}</view>
						<view class="sku-content">
							<text 
								class="sku-content-item" 
								v-for="(item,index) in sku[speList]"
								:key="index" 
								:style="{
									backgroundColor: index===sku.sidx? themeColor: '#f5f5f5',
									color:index===sku.sidx?'#fff':'',
									}" 
								@click="selectSku(sIndex,index)"
							>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="sku-item container count">
					<view class="sku-name">购买数量</view>
					<view class="count-box">
						<text class="minus" :class="{disabled:buyCount<=1}" @click="handleBuyCount('minus')">-</text>
						<input class="count-content" v-model="buyCount" />
						<text class="add" @click="handleBuyCount('add')">+</text>
					</view>
				</view>
				<view v-if="gType == 1" class="confirm-btn container" style="gap: 20rpx;">
					<u-button color="#5c8edc" shape="circle" text="立即购买" @click="handleConfirm"></u-button>
				</view>
				
				<view v-else class="confirm-btn container" style="gap: 20rpx;margin-bottom: 20rpx;">
					<u-button color="#5c8edc" shape="circle" :plain="true" text="加入购物车" @click="inCart"></u-button>
					<u-button color="#5c8edc" shape="circle" text="立即购买" @click="handleConfirm"></u-button>
				</view>
			</view>
	</popup-bottom>
</template>

<script>
	import PopupBottom from './popup-bottom'
	export default {
		components:{
			PopupBottom
		},
		filters: {
			toFixed2: function (value) {
			  if(!value) return '0.00'
			  return Number(value).toFixed(2)
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			gType:{
				type: Number,
				default: 0
			},
			themeColor: {
				type: String,
				default: '#5c8edc'
			},
			combinations: {
				type: Array,
				default(){
					return []
				}
			},
			discount: {
				type: String,
				default: '0'
			},
			specifications: {
				type: Array,
				default(){
					return []
				}
			},
			defaultSelectIndex: {
				type: Number,
				default: 0
			},
			
			goods_id: {
				type: String,
				default: ''
			},
			combinationsProps: {
				type: Object,
				default(){
					return {
						id: 'id',
						value: 'value',
						image: 'image',
						price: 'price',
						stock: 'stock'
					}
				}
			},
			specificationsProps: {
				type: Object,
				default(){
					return {
						id: 'id',
						list: 'list',
						name: 'name'
					}
				}
			},
		},
		data() {
			return {
				buyCount: 1,
				selectedIndex: 0,
				borderWidth: uni.upx2px(2),
				mySpecifications: [],
				spec_id_arr:{},
				commodity:{
					sku_name:{}
				}
			}
		},
		watch:{
			specifications(val){
				
				this.initSkuData()
				
			}
		},
		computed: {
			speId() {
				return this.specificationsProps.id
			},
			speList() {
				return this.specificationsProps.list
			},
			speName() {
				return this.specificationsProps.name
			},
			
		},
		created() {
			if(this.specifications.length) {
				this.initSkuData()
			}
		},
		methods: {
			
			initSkuData() {
				this.selectedIndex = this.defaultSelectIndex

				this.mySpecifications = JSON.parse(JSON.stringify(this.specifications))
				
				this.mySpecifications.map((item,index)=>{
					item.children.map((tem,inx)=>{
						if(inx==0){
							this.mySpecifications[index].sidx = inx
							this.spec_id_arr[String(this.mySpecifications[index].spec_id)]=this.mySpecifications[index].children[inx].spec_id
							this.commodity.sku_name[String(this.mySpecifications[index].spec_id)]=this.mySpecifications[index].children[inx].name
						}
						
					})
				})
				this.get_sku_name()
				
				
			},
			get_sku_name(){
				
					this.$request({
						url: '?c=Goods&a=skuSearch',
						type:'post',
						data: {
							goods_id:this.goods_id,
							spec_id:JSON.stringify(this.spec_id_arr) 
						}
					}).then(res => {
						if(res.data==null){
							this.$u.toast('暂无数据')
							return 
						}
						this.commodity.price=res.data.sku_sell_price
						this.commodity.stock=res.data.sku_stock
						this.commodity.image=res.data.sku_img_url
						this.commodity.sku_id=res.data.sku_id
						
						///商品类型 1普通商品 2卡密商品3虚拟商品
						this.commodity.goods_type = res.data.goods_type
						this.commodity.free_shipping = res.data.free_shipping
						this.commodity.fixed_shipping_type = res.data.fixed_shipping_type
						this.commodity.fixed_shipping_fee = res.data.fixed_shipping_fee
						this.commodity.shipping_method = res.data.shipping_method
						
						this.$forceUpdate()
						
					})
				
			},
			selectSku(sIndex,index) {
				this.mySpecifications[sIndex].sidx = index
				
				
				this.spec_id_arr[String(this.mySpecifications[sIndex].spec_id)]=this.mySpecifications[sIndex].children[index].spec_id
				
				this.commodity.sku_name[String(this.mySpecifications[sIndex].spec_id)]=this.mySpecifications[sIndex].children[index].name
				let num=0
				for(let key in this.spec_id_arr){
					
					num++
				}
				
				// console.log(this.mySpecifications[sIndex].children[index].name)
				// uni.$emit('isRefresh', this.mySpecifications[sIndex].children[index].name)
				this.$emit('isRefresh',this.mySpecifications[sIndex].children[index].name)
				if(this.mySpecifications.length==num){
					this.get_sku_name()
				
				}
				
				
			},
			handleBuyCount(type) {
				if(type === 'minus') {
					if(this.buyCount <= 1) return
					this.buyCount = this.buyCount*1 - 1
				}
				if(type === 'add') {
					
					this.buyCount = this.buyCount*1 + 1
				}
				this.$emit('box_change',this.buyCount)
				
			},
			closeSkuBox() {
				this.$emit('close')
			},
			
			inCart(){
				const result = {
						sell_price:this.commodity.price,
						sku_id:this.commodity.sku_id,
						order_number:this.buyCount*1,
						sku_name:this.commodity.sku_name,
						image:this.commodity.image,
				}
				this.$emit('confirmCart', result)
			},
			
			handleConfirm() {
				
				const result = {
						sell_price:this.commodity.price,
						sku_id:this.commodity.sku_id,
						order_number:this.buyCount*1,
						sku_name:this.commodity.sku_name,
						image:this.commodity.image,
						goods_type:this.commodity.goods_type,
						free_shipping:this.commodity.free_shipping,
						fixed_shipping_type:this.commodity.fixed_shipping_type,
						fixed_shipping_fee:this.commodity.fixed_shipping_fee,
						shipping_method:this.commodity.shipping_method,
						sku_stock:this.commodity.stock
				}
				
				console.log(result)
			
				this.$emit('confirm', result)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ab_bot{
		position: absolute;
		right: 0rpx;
		top: 30rpx;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}

	.flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	$font-color-light: #999999;
	$page-bg-color-grey: #f5f5f5;

	.fs-24 {
		font-size: 24upx;
	}

	.fs-26 {
		font-size: 26upx;
	}

	.fs-38 {
		font-size: 38upx;
	}

	.container {
		width: 690upx;
		margin: 0 auto;
	}

	.sku-box {
		min-height: 500upx;
		background-color: white;
		padding-bottom: 20upx;
		font-size: 28upx;
		color: #333333;
		.sku-header {
			position: relative;
			display: flex;
			padding: 40upx 0 20upx;
			.goods-img {
			
				width: 170upx;
				height: 170upx;
				border-radius: 16upx;
				border: 4upx solid white;
				flex: none;
				
			}
		}
		.sku-goods-info {
			margin-left: 20upx;
			line-height: 55upx;
			.money {
				border: none;
				padding-bottom: 0;
			}
			.stock {
				color: $font-color-light;
			}
		}
		.sku-list {
			max-height: 500upx;
		}
		.sku-item {
			padding: 30upx 0;
			.sku-name {
				font-size: 30upx;
			}
			.sku-content {
				border-bottom: 2upx solid $page-bg-color-grey;
				padding: 20upx 0;
				margin-right: 20rpx;
				@extend .flex-center;
				flex-wrap: wrap;
				.sku-content-item {
					padding: 10upx 20upx;
					border-radius: 35upx;
					margin: 0 30upx 20upx 0;
					border: 2upx solid transparent;
					overflow-wrap: break-word;
					max-width: 90vw;
				}
			}
			&.count {
				@extend .flex-center;
				justify-content: space-between;
				.count-box {
					@extend .flex-center;
					text,.count-content {
						@extend .flex-center-center;
						width: 70upx;
						height: 70upx;
						font-size: 32upx;
						border: 2upx solid $page-bg-color-grey;
					}
					.add,.minus {
						font-size: 44upx;
					}
					.count-content {
						border-width: 2upx 0;
						text-align: center;
					}
				}
			}
		}
		.confirm-btn {
			@extend .flex-center-center;
			height: 80upx;
			border-radius: 80upx;
			color: white;
			font-size: 32upx;
			margin-top: 10upx;
		}
	}

	[class*=disabled] {
		color: $font-color-light;
		opacity: .7;
	}
</style>
